<template>
    <el-container>
        <!-- Header -->
        <el-header class="custom-header">
            <el-row justify="start">

                <el-col :push="2" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                    <div>
                        <Logo></Logo>
                        <span class="logo-title" v-if="!isMobile">鑫满网盘</span>
                    </div>
                </el-col>
                <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                    <el-row justify="end">
                        <el-col :xs="0" :sm="0" :md="3" :lg="3" :xl="3">
                            <!-- <el-col class="hidden-sm-and-down" :md="3" :lg="3" :xl="3"> -->
                            <span class="header-title">网盘</span>
                        </el-col>
                        <el-col :xs="0" :sm="0" :md="3" :lg="3" :xl="3">
                            <!-- <el-col class="hidden-sm-and-down" :md="3" :lg="3" :xl="3"> -->
                            <span class="header-title">分享</span>
                        </el-col>
                        <el-col :xs="0" :sm="0" :md="3" :lg="3" :xl="3">
                            <!-- <el-col class="hidden-sm-and-down" :md="3" :lg="3" :xl="3"> -->
                            <el-dropdown>
                                <span class="header-title">
                                    更多
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu class="header-dropdown-more">
                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Document />
                                            </el-icon>
                                            <span>垃圾文件清理</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Phone />
                                            </el-icon>
                                            <span>通话记录</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Message />
                                            </el-icon>
                                            <span>短信</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Notebook />
                                            </el-icon>
                                            <span>记事本</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Tools />
                                            </el-icon>
                                            <span>设备管理</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Monitor />
                                            </el-icon>
                                            <span>智能设备</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Check />
                                            </el-icon>
                                            <span>论文查重</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Open />
                                            </el-icon>
                                            <span>开放平台</span>
                                        </el-dropdown-item>

                                        <el-dropdown-item :style="headerDropdownMoreItemStyle">
                                            <el-icon class="icon">
                                                <Open />
                                            </el-icon>
                                            <span>开放平台</span>
                                        </el-dropdown-item>

                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-col>
                        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                            <!-- 账号图标 -->
                            <div>
                                <el-dropdown v-if="true">
                                    <!-- <span class="header-title">ha_book888888</span> -->
                                    <!-- <el-avatar :size="25" :src="userimg" /> -->
                                    <el-icon class="header-user-icon" color="blue" :size="20">
                                        <UserFilled />
                                    </el-icon>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item>个人信息</el-dropdown-item>
                                            <el-dropdown-item>修改密码</el-dropdown-item>
                                            <el-dropdown-item>设备管理</el-dropdown-item>
                                            <el-dropdown-item>帮助中心</el-dropdown-item>
                                            <el-dropdown-item>退出登录</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>


                        </el-col>

                        <!-- 折叠按钮：大屏折叠 Aside，小屏打开抽屉 -->
                        <el-col :xs="9" :sm="9" :md="4" :lg="4" :xl="4">

                            <el-icon @click="toggleAside" color="blue" :size="20"><icon-menu /></el-icon>
                        </el-col>

                    </el-row>

                </el-col>
            </el-row>
        </el-header>

        <el-container>
            <!-- 大屏时显示正常 Aside -->
            <el-aside v-show="!isMobile" :width="isCollapsed ? '0px' : '200px'" class="custom-aside">
                <el-menu :collapse="isCollapsed" class="el-menu-vertical-demo" default-active="2" @open="handleOpen"
                    @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <Files />
                            </el-icon>
                            <span>全部文件</span>
                        </template>
                        <el-menu-item index="1-1">图片</el-menu-item>
                        <el-menu-item index="1-2">文档</el-menu-item>
                        <el-menu-item index="1-3">视频</el-menu-item>
                        <el-menu-item index="1-4">种子</el-menu-item>
                        <el-menu-item index="1-4">音乐</el-menu-item>
                        <el-menu-item index="1-4">其它</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="2">
                        <el-icon>
                            <Share />
                        </el-icon>
                        <span>我的分享</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        <span>回收站</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <SwitchButton />
                        </el-icon>
                        <span>退出登录</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <!-- Main 内容区域 -->
            <el-main class="custom-main" :style="style">
                <!-- <div>Main Content</div> -->
                <el-row justify="start">
                    <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16">
                        <el-button plain>上传</el-button>
                        <el-button plain>新建</el-button>
                        <el-button plain>更多</el-button>
                        <el-button plain>刷新</el-button>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="8">
                        <el-input v-model="input" placeholder="搜索...">
                            <template #append>
                                <el-button type="primary" icon="el-icon-search">
                                    搜索
                                </el-button>
                            </template>
                        </el-input>
                    </el-col>
                </el-row>
                <!-- 文件列表 -->
                <el-table :data="files" border style="width: 100%">
                    <el-table-column type="selection" />
                    <el-table-column prop="name" label="文件名" width="500">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <el-icon :size="20" color="blue">
                                    <Folder />
                                </el-icon>
                                <el-link :underline="false" type="success"><span style="margin-left: 10px">{{
                                    scope.row.name }}</span></el-link>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="ShowFileOrDirSize" prop="size" label="大小" />
                    <el-table-column v-if="ShowFileOrDirDate" prop="date" label="修改日期" />
                </el-table>
            </el-main>
        </el-container>

        <!-- 抽屉 Aside (小屏时使用) -->
        <el-drawer v-if="isMobile" v-model="drawerVisible" direction="ltr" title="导航" :with-header="true" size="200px">
            <el-menu class="el-menu-vertical-demo">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Files />
                        </el-icon>
                        <span>全部文件</span>
                    </template>
                    <el-menu-item index="1-1">图片</el-menu-item>
                    <el-menu-item index="1-2">文档</el-menu-item>
                    <el-menu-item index="1-3">视频</el-menu-item>
                    <el-menu-item index="1-4">种子</el-menu-item>
                    <el-menu-item index="1-4">音乐</el-menu-item>
                    <el-menu-item index="1-4">其它</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="2">
                    <el-icon>
                        <Share />
                    </el-icon>
                    <span>我的分享</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    <span>回收站</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <SwitchButton />
                    </el-icon>
                    <span>退出登录</span>
                </el-menu-item>
            </el-menu>
        </el-drawer>

        <!-- Footer 固定在底部 -->
        <el-footer height="40px" class="custom-footer">
            <!-- Footer -->
            <el-row>
                <el-col :span="24">
                    <div class="footer-content">
                        <span>© 2024 网盘系统 | Powered by 鑫满网盘</span>
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>

</template>

<script setup>
import { ref, onMounted } from "vue";
import Logo from "@/components/Logo.vue";
const isCollapsed = ref(false); // 控制大屏时 Aside 折叠状态
const isMobile = ref(false); // 判断是否为小屏
const drawerVisible = ref(false); // 控制抽屉显示状态
const color = ref("blue"); // 控制抽屉显示状态

// 切换 Aside 折叠（大屏）或打开抽屉（小屏）
const style = ref("left:200px;")
const headerDropdownMoreItemStyle = ref(`flex-direction: column;
                                        padding: 8px;
                                        align-items: center; 
                                        flex-basis: calc(25% - 16px);
                                        `)
const toggleAside = () => {
    if (isMobile.value) {
        style.value = "left:0px;"
        drawerVisible.value = !drawerVisible.value;
    } else {
        isCollapsed.value = !isCollapsed.value;
        if (isCollapsed.value) {
            style.value = "left:0px;"
        } else {
            style.value = "left:200px;"
        }
    }
};

const ShowFileOrDirSize = ref(true)
const ShowFileOrDirDate = ref(true)

// 检测屏幕宽度
const handleResize = () => {
    let screenWidth = window.innerWidth;
    isMobile.value = screenWidth < 768; // 小屏幕阈值
    ShowFileOrDirDate.value = !isMobile.value
    ShowFileOrDirSize.value = !isMobile.value
    if (isMobile.value) {
        style.value = "left:0px;"
    } else {
        style.value = "left:200px;"
    }
};

onMounted(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
});

// 右侧菜单
import {
    Menu as IconMenu,
    Files,
    Share,
    Delete,
    Folder,
    SwitchButton,
    ArrowDown,
    Open,
    Tools,
    UserFilled,
    Document, Phone, Message, Notebook, Setting, Monitor, Check
} from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
    console.log("打开")
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
    // style.value = "left:0px;"
    console.log("关闭")
}
// 搜索框
const input = ref('')
// main区域表格
const files = ref([
    { id: 1, name: "Photoshop CC移动UI设计实战一本通", size: "-", date: "2023-08-29 11:04" },
    { id: 2, name: "Photoshop 图像处理与制作", size: "-", date: "2023-08-29 11:04" },
    { id: 3, name: "Photoshop 2020从新手到高手", size: "-", date: "2023-08-29 11:04" },
    { id: 4, name: "ui设计素材", size: "-", date: "2023-08-01 17:44" },
    { id: 5, name: "3207622_泰思通字Word破解", size: "46.5M", date: "2024-02-28 21:49" },
    { id: 6, name: "K84.zip", size: "11.9M", date: "2024-02-28 21:26" },
    { id: 7, name: "Photoshop CC移动UI设计实战一本通", size: "-", date: "2023-08-29 11:04" },
    { id: 8, name: "Photoshop 图像处理与制作", size: "-", date: "2023-08-29 11:04" },
    { id: 9, name: "Photoshop 2020从新手到高手", size: "-", date: "2023-08-29 11:04" },
    { id: 10, name: "ui设计素材", size: "-", date: "2023-08-01 17:44" },
    { id: 11, name: "3207622_泰思通字Word破解", size: "46.5M", date: "2024-02-28 21:49" },
    { id: 12, name: "K84.zip", size: "11.9M", date: "2024-02-28 21:26" },
]); // 文件列表模拟数据

</script>

<style scoped lang="scss">
// @import "@/assets/styles/mixin.scss";
// @import "@/assets/styles/variables.scss";

.custom-header {
    .el-dropdown:focus-visible {
        @include borderOutline;
    }
}

.custom-header {
    .header-title:focus-visible {
        @include borderOutline;
    }
}

.custom-header {
    .el-icon--right:focus-visible {
        @include borderOutline;
    }
}

.custom-header {
    .el-avatar:hover {
        @include borderOutline;
    }
}

.logo-title {
    font-size: 1.4rem;
    font-weight: bold;
}


/* Header 样式 */
.custom-header {
    @include fixedPosition($background-color);
    // position: fixed;
    // background-color: $background-color;
    width: 100%;
    top: 0;
    left: 0;
    color: white;
    /* justify-content: space-between; */
    /* 内容两端对齐 */
    /* align-items: center; */
    /* padding: 0 20px; */
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;
    z-index: 10;
    transition: all 0.3s;
}

.custom-header {
    .el-col {
        /* 去除背景色和边框 */
        background-color: $background-color;
        border: none;
        padding-top: 8px;
        color: #606266
    }
}

.header-title {
    font-size: 16px;
}

.header-dropdown-more {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: start;
    max-width: 600px;

}


/* Footer 样式 */
.custom-footer {
    // position: fixed;
    @include fixedPosition($background-color);
    width: 100%;
    bottom: 0;
    left: 0;
    // background-color: $background-color;
    color: white;
    text-align: center;
    line-height: 40px;
    z-index: 10;
}

.custom-footer {
    .el-col {
        background-color: $background-color;
        border: none;
        color: #606266
    }
}

/* Aside 样式 */
.custom-aside {
    // position: fixed;
    // @include fixedPosition;
    @include fixedPosition($background-color);
    top: 60px;
    bottom: 40px;
    left: 0;
    // background-color: $background-color;
    overflow-y: auto;
    transition: width 0.3s;
    margin-top: 25px;
}

.custom-main {
    @include fixedPosition($background-color);
    // position: fixed;
    // background-color: $background-color;
    bottom: 40px;
    left: 200px;
    right: 0;
    top: 45px;
    overflow-x: auto;
    overflow-y: auto;
    padding: 25px;
    transition: all .4s;
    z-index: 10;
}

/* .custom-main[style*="margin-left: 0px"] {
    margin-left: 0 !important;
} */
/*
main样式区
 */
.custom-main {
    .el-col {
        border: none;
        background-color: $background-color;
        padding: 15px;
        text-align: left;
        padding-left: 0px
    }
}

/* 
更多下拉框
 */
.custom-header {
    .header-find {
        width: 530px;
        height: 200px;
        padding: 20px;
        background: $background-color;
        border: 1px solid #d9e1ec;
        border-radius: 5px;
        box-shadow: 0 0 10px 0 #becfe8;
        position: absolute;
        left: -155px;
        top: 53px;
        z-index: 1;
        display: none;
    }
}

/* 图标样式 */
.el-dropdown-menu .icon {
    font-size: 30px;
    /* 图标大小 */
    color: blue;
    /* 图标颜色 */
}

.header-user-icon:focus {
    @include borderOutline;
}
</style>
